<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Users</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<!-- <link rel="stylesheet" type="text/css" href="css/main.css" /> -->
</head>

<body>
<style>
.user-list {
    clear: both;
    list-style: none;
    position: relative;
    width: 900px;
    padding: 0;
    margin: 0;
}
.user-list li {
    display: inline-block;
    width: 25%;
    margin: 0 25px 50px 25px;
}
.user .avatar {
    float: left;
    width: 80px;
    height: 80px;
    margin: 0 15px 0 0;
    border: solid 5px #eee;
    border-radius: 50%;
    background: #ddd;
}
.user .info {
    float: left;
}
.user .info .nick {
    display: block;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    text-decoration: none;
    color: #333;
}
.user .info .kcal {
    display: block;
    height: 40px;
    line-height: 40px;
    font-size: 25px;
    color: #f66;
}
.user .info .icons {
    margin: 0;
}
.user .info .icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    line-height: 10px;
    background: #ddd;
}

.user .hw {
    float: left;
    position: relative;
    width: 120px;
    height: 120px;
}

.user .hw .h {
    display: block;
    position: absolute;
    left: 15px;
    top: 15px;
    width: 90px; /* 170 - 80 */
    height: 90px;
    border-radius: 50%;
    background: #69f;
}

.user .hw .w {
    display: block;
    position: absolute;
    left: 30px;
    top: 30px;
    width: 60px;    /* 90 - 30 */
    height: 60px;
    border-radius: 50%;
    background: #369;
}

.user .chw {
    float: left;
    position: relative;
    width: 120px;
    height: 120px;
}

.user .chw .c {
    z-index: 2;
    display: block;
    position: absolute;
    left: 15px;
    top: 15px;
    width: 90px; /* 100 - 10 */
    height: 90px;
    border-radius: 50%;
    background: #69f;
}

.user .chw .h {
    z-index: 1;
    display: block;
    position: absolute;
    left: 10px;
    top: 10px;
    width: 100px; /* 110 - 10 */
    height: 100px;
    border-radius: 50%;
    background: #f90;
}

.user .chw .w {
    z-index: 3;
    display: block;
    position: absolute;
    left: 25px;
    top: 25px;
    width: 70px; /* 80 - 10 */
    height: 70px;
    border-radius: 50%;
    background: #369;
}
</style>
<div class="page-body">
    <div class="user">
        <div class="hw">
            <span class="h"></span>
            <span class="w"></span>
        </div>
        <div class="chw">
            <span class="c"></span>
            <span class="h"></span>
            <span class="w"></span>
        </div>
    </div>
    <ul class="user-list">
        <li class="user">
            <div class="avatar"></div>
            <div class="info">
                <a class="nick" href="#">Nickname</a>
                <strong class="kcal">500</strong>
                <p class="icons">
                    <i class="icon"></i>
                    <i class="icon"></i>
                    <i class="icon"></i>
                </p>
            </div>
        </li>

        <li class="user">
            <div class="avatar"></div>
            <div class="info">
                <a class="nick" href="#">Nickname</a>
                <strong class="kcal">500</strong>
                <p class="icons">
                    <i class="icon"></i>
                    <i class="icon"></i>
                    <i class="icon"></i>
                </p>
            </div>
        </li>
        <li class="user">
            <div class="avatar"></div>
            <div class="info">
                <a class="nick" href="#">Nickname</a>
                <strong class="kcal">500</strong>
                <p class="icons">
                    <i class="icon"></i>
                    <i class="icon"></i>
                    <i class="icon"></i>
                </p>
            </div>
        </li>
        <li class="user">
            <div class="avatar"></div>
            <div class="info">
                <a class="nick" href="#">Nickname</a>
                <strong class="kcal">500</strong>
                <p class="icons">
                    <i class="icon"></i>
                    <i class="icon"></i>
                    <i class="icon"></i>
                </p>
            </div>
        </li>
        <li class="user">
            <div class="avatar"></div>
            <div class="info">
                <a class="nick" href="#">Nickname</a>
                <strong class="kcal">500</strong>
                <p class="icons">
                    <i class="icon"></i>
                    <i class="icon"></i>
                    <i class="icon"></i>
                </p>
            </div>
        </li>
        <li class="user">
            <div class="avatar"></div>
            <div class="info">
                <a class="nick" href="#">Nickname</a>
                <strong class="kcal">500</strong>
                <p class="icons">
                    <i class="icon"></i>
                    <i class="icon"></i>
                    <i class="icon"></i>
                </p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>